import { Card, Icon } from 'antd';
import React from 'react';
import style from '../index.less';
import Grid from './Grid';
import { Order } from '../../model';
import { payTypeMap, sourceTypeMap } from '../../List/components/ListTable';

const gridStyle = {
  width: '25%',
  textAlign: 'center',
};

interface OrderBaseInfoProps extends Order {}

const OrderBaseInfo: React.FC<OrderBaseInfoProps> = props => (
  <div>
    <div style={{ marginBottom: '15px' }}>
      <Icon type="info-circle" theme="filled" />
      <span style={{ marginLeft: '7px' }}>基本信息</span>
    </div>
    <Card className={style['base-info-card']}>
      <Card.Grid className={style['grid-wrapper']} hoverable={false} style={gridStyle}>
        <Grid title="订单编号" content={props.orderSn} />
      </Card.Grid>
      <Card.Grid className={style['grid-wrapper']} hoverable={false} style={gridStyle}>
        <Grid title="用户账号" content={props.appUserName} />
      </Card.Grid>
      <Card.Grid className={style['grid-wrapper']} hoverable={false} style={gridStyle}>
        <Grid title="支付方式" content={payTypeMap[props.payType]} />
      </Card.Grid>
      <Card.Grid className={style['grid-wrapper']} hoverable={false} style={gridStyle}>
        <Grid title="订单来源" content={`${sourceTypeMap[props.sourceType] || 'APP'}订单`} />
      </Card.Grid>
      <Card.Grid className={style['grid-wrapper']} hoverable={false} style={gridStyle}>
        <Grid title="物流单号" content={props.deliverySn} />
      </Card.Grid>
      <Card.Grid className={style['grid-wrapper']} hoverable={false} style={gridStyle}>
        <Grid title="物流公司" content={props.deliveryCompany} />
      </Card.Grid>
      <Card.Grid className={style['grid-wrapper']} hoverable={false} style={gridStyle}>
        <Grid title="订单可得成长值" content="0" />
      </Card.Grid>
      <Card.Grid className={style['grid-wrapper']} hoverable={false} style={gridStyle}>
        <Grid title="备注" content="暂无" />
      </Card.Grid>
    </Card>
  </div>
);

export default OrderBaseInfo;
